<template>
  <div class="search">
    <van-nav-bar title="面经分享">
      <template #left>
        <i @click="$router.go(-1)" class="iconfont iconbtn_nav_back myicon"></i>
      </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <van-search
      v-model="search"
      show-action
      placeholder="请输入搜索关键词"
      @search="getSearch"
      @cancel="onCancel"
      shape="round"
    />
    <!-- 搜索关键词 -->
    <div class="main" v-if="isSearch === false">
      <van-cell>
        <div class="title">
          大家都在搜索
        </div>
        <div class="keyword">
          <span
            @click="getSearch(item)"
            v-for="(item, index) in topSearch"
            :key="index"
            >{{ item }}</span
          >
        </div>
      </van-cell>
      <van-cell>
        <div class="title">历史搜索 <span @click="clear">清空</span></div>
        <div class="keyword">
          <span
            v-for="(item, index) in history"
            :key="index"
            @click="getSearch(item)"
            >{{ item }}</span
          >
        </div>
      </van-cell>
    </div>
    <!-- 文章列表 -->
    <share
      v-else
      :item="item"
      v-for="(item, index) in list"
      :key="index"
    ></share>
  </div>
</template>

<script>
import share from '../find/share'
import { apiGetTopSearch, apiGetShare } from '@/api/find.js'
//
import { setLocal, getLocal, delLocal } from '@/utils/local.js'
export default {
  components: { share },
  data () {
    return {
      search: '',
      //   热词
      topSearch: [],
      //   文字搜索列表
      list: [],
      isSearch: false,
      //   历史记录
      //
      history: JSON.parse(getLocal('history')) || []
    }
  },
  methods: {
    // 获取热词
    async getTopSearch () {
      const res = await apiGetTopSearch()
      console.log(res)
      this.topSearch = res.data
    },
    // 搜索
    async getSearch (key) {
      this.history.unshift(key)
      this.history = [...new Set(this.history)]
      //   console.log(new Set(this.history))
      //   console.log(this.history)
      if (this.history.length >= 5) {
        this.history = this.history.slice(0, 5)
      }
      setLocal('history', JSON.stringify(this.history))
      this.isSearch = true

      this.search = key

      const res = await apiGetShare({ q: key })

      res.data.list.forEach(item => {
        item.title = item.title.replace(
          key,
          `<span style="color:red">${key}</span>`
        )
      })
      console.log(res.data.list)
      console.log(res.data.list[0].title)
      this.list = res.data.list
      //   console.log(this.list)
    },
    // 取消搜索
    onCancel () {
      this.isSearch = false
    },
    // 清空历史记录
    clear () {
      this.history = []
      delLocal('history')
    }
  },
  created () {
    this.getTopSearch()
  }
}
</script>

<style lang="less" scoped>
.search {
  background: #fff;
  height: 100%;
  font-size: 12px;
  /deep/.van-nav-bar {
    height: 44px;
    box-shadow: 0px 4px 8px 0px rgba(24, 26, 57, 0.04);
  }
  /deep/.van-nav-bar__left {
    padding-left: 0px;
  }
  .myicon {
    font-size: 50px;
  }
  .main {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      font-size: 18px;
      font-weight: 500;
      color: #222222;
      margin-bottom: 20px;
      span {
        font-size: 12px;
      }
    }
    .keyword {
      span {
        margin: 0 5px 10px;
        float: left;
        background: #f7f4f5;
        border-radius: 6px;
        padding: 2px 5px;
      }
    }
  }
}
</style>
